<template>
	<!-- 在组件中只能拥有一个根div -->
	<div id="container">
		<div id="topCommodity">
			<ul class="topUl">
				<li v-for="(item,index) in Recommend" :key="index">
					<img :src="item.icon" style="width: 100%; height: 100%;"/>
				</li>
			</ul>
		</div>
		<div class="commodity">
			<div v-for="(item,index) in shopList" :key="index" class="commodityBox">
				<div class="commodityImg">
					<img :src="item.value.cover" style="width: 100%;height: 80%; display: flex; " />
				</div>
				<div class="commodityText">
					<div class="commodityTextTitle">
						{{item.value.title}}
					</div>
					<div class="commodityTextPrice">
						{{item.value.price}}
					</div>
					<div class="commodityTextBottom">
						<div id="mallNames">{{item.value.mallName}}</div>
						<span style="margin-left: 5px;">|{{item.value.pubDate|formate}}</span>
						<img src="../../../../public/购物车.png"  style="position: absolute;right: 0;bottom: 2px;"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				Recommend:[],
				shopList:[]
			}
		},
		filters:{
			formate(data){
				var d = new Date(data)
				return (d.getMonth()+1)+"-"+d.getDate();
			}
		},
		mounted(){
			this.$http.get(this.$apis.selected).then((resp)=>{
				this.Recommend = resp.data.sunplazaEntrys;
				this.shopList = resp.data.listIndex;
				console.log(this.shopList)
			})
			// this.loadList(selected);
		}
	}
</script>

<style lang="scss" scoped>
	#container{
		width: 100%;
		height: auto;
		#topCommodity{
			width: 100%;
			height: 200px;
			margin-top: 5px;
			background: white;
			display: flex;
			justify-content: center;
			.topUl{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-content: space-around;
				flex-wrap: wrap;
				li{
					
					display: flex;
					width: 45%;
					flex-wrap: wrap;
					height: auto;
					border: 1px solid lightgray;
				}
			}
		}
		.commodity{
			width: 100%;
			height:auto;
			margin-top:5px;
			.commodityBox{
				width:100%;
				height:150px;
				border-top: 1px solid lightgray;
				background: white;
				display: flex;
				.commodityImg{
					width: 55%;
					height: 100%;
					display: flex;
					align-items: center;
					padding: 8px;
					box-sizing: border-box;
				}
				.commodityText{
					width:100% ;
					height: 100%;
					font-size: 15px;
					padding: 10px;
					box-sizing: border-box;
					.commodityTextTitle{
						width: 200px;
						height: 29px;
						display: block;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.commodityTextPrice{
							width: 200px;
							display: block;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							color: red;
							margin-top:20px;
					}
					.commodityTextBottom{
						width: 100%;
						font-size: 12px;
						display: flex;
						margin-top: 40px;
						color:gray;
						position: relative;
					}
				}
			}
			
		}
	}
	
</style>
